<template>
  <page>
    <p-header :title="title? title : 'Retrieve Password'"/>
    <StackLayout class="container">
      <Label class="title" :text="title? title : 'Retrieve Password'"/>
      <GridLayout columns="*,auto" class="input-line">
        <TextField v-model="email" hint="Your email" col='0' keyboardType="email"
          autocorrect="false" autocapitalizationType="none"></TextField>
        <Button col="1" class="send-btn" text="Send" :isEnabled="email.length > 0 && email.indexOf('@') > 0 && !this.isSending" @tap="sendCode"/>
      </GridLayout>
      <GridLayout columns="*" class="input-line">
        <TextField v-model="code" hint="Verification code" col='0'
          autocorrect="false" autocapitalizationType="none"></TextField>
      </GridLayout>
      <Button class="confirm-btn" text="Next" :isEnabled="email.length > 0 && code.length >= 6 && !this.isNexting" @tap="next"/>
    </StackLayout>
  </page>
</template>
<script>
import Header from '../common/Header'
import PButton from '../common/PButton'
import {post, get} from '~/business/NetRequest'
import ResetPass from '~/components/common/ResetPassword'

export default {
  components: {
    'p-header': Header,
    'p-button': PButton
  },
  props: ['title'],
  data() {
    return {
      email: '',
      code: '',
      isSending: false,
      isNexting: false,
    }
  },
  methods: {
    next() {
      let self = this
      this.isNexting = true
      get({
        api: `account/resetpwd?code=${this.code}`,
        success: (ret) => {
          self.isNexting = false
          if (ret.error) {
            alert(ret.error)
            return
          }
          self.$navigateTo(ResetPass, {
            props: {
              title: 'Reset Password',
              needCheckSame: true,
              onConfirm: (first, second, done) => {
                 post({
                  api: 'account/resetpwd',
                  data: {
                    token: ret.token,
                    password: second
                  },
                  success: () => {
                    done()
                    alert({
                      title: 'Success',
                      message: 'Successfully reset your password',
                      okButtonText: 'OK'
                    }).then(() => {
                      self.$navigateBack()
                      self.$navigateBack()
                    })
                  },
                  error: (code, msg) => {
                    alert(msg)
                  }
                })
              }
            }
          })
        },
        error: (code, msg) => {
          alert(msg)
          self.isNexting = false
        }
      })
    },
    sendCode() {
      const self = this
      this.isSending = true
      post({
        api: 'account/forgotPwd',
        data: {email: this.email},
        error: (code, msg) => {
          self.isSending = false
          alert(msg)
        },
        success:() => {
          self.isSending = false
          alert({
            title: 'Send Success',
            message: 'Pls check your mail box',
            okButtonText: "OK"
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .container {
    background: #15253c;
    padding-left: 38;
    padding-right: 38;
  }
  .send-btn, .confirm-btn{
    width: 62;
    height: 24;
    background:linear-gradient(to right, #01c4e7, #0081d8);
    color:white; 
    border-radius: 4;
    font-size: 12;
    padding: 0;
  }
  .send-btn:disabled, .confirm-btn:disabled {
    background: #5d80a4;
  }
  .title {
    margin-top: 91;
    color: white;
    font-size: 24;
    font-family: 'PingFangSC';
  }
  .input-line {
    height:50;border-bottom-color:#264664;border-bottom-width:1px;
    margin-top: 20;
  }
  .input-line TextField{
    color:#ffffff;font-family:'PingFangSC-Regular';placeholder-color:#687889;
  }
  .confirm-btn {
    margin-top: 36;
    width: 100%;
    height: 50;
  }
</style>

